<script setup>
import {onMounted, ref} from "vue";
import request from "@/requests/request.js";
import {idStores} from "@/stores/stores.js";
import {ElMessage} from "element-plus";

const emits = defineEmits('visible')
const props = defineProps({
  type: String
})
const classForm = ref(null)
const thisClass = ref({
  id: "2",
  name: "23软件工程2班",
  majorName: "软件工程",
  collegeName: "信息科学学院",
  teacherName: "韦晓萍",
  count: 24
})
if (props.type === 'add') {
  thisClass.value = {
    id: null,
    name: null,
    majorName: null,
    collegeName: null,
    teacherName: null,
  }
}
const rules = ref({
  name: [
    {required: true, message: '请输入班级名称', trigger: 'blur'},
  ],
  collegeName: [
    {required: true, message: '请选择学院', trigger: 'change'},
  ],
  majorName: [
    {required: true, message: '请选择专业', trigger: 'change'},
  ],
  teacherName: [
    {required: true, message: '请选择教师', trigger: 'change'},
  ]
})
const majorOptions = ref([])
const collegeOptions = ref([])
const teacherOptions = ref([])
const stores = idStores();
onMounted(() => {
  request.get('/college/get-college-tree').then(res => {
    collegeOptions.value = res.data.data

  })
  request.get('/teacher/get-teacher-node').then(res => {
    teacherOptions.value = res.data.data
  })
  request.get('/class/get-class-info', {
    params: {
      id: stores.id
    }
  }).then(res => {
    thisClass.value = res.data.data
    if (props.type === 'add') {
      thisClass.value = {
        id: null,
        name: null,
        majorName: null,
        collegeName: null,
        teacherName: null,
      }
    }
    majorOptions.value = collegeOptions.value.find(item => item.id === thisClass.value.collegeName).children
  })
})
const handleChange = (value) => {
  majorOptions.value = collegeOptions.value.find(item => item.id === value).children
}
const submitForm = (rules) => {
  classForm.value.validate((valid) => {
    if (valid) {
      if (props.type === 'add') {
        request.post('/class/add-class', {
          collegeId: thisClass.value.collegeName,
          name: thisClass.value.name,
          majorId: thisClass.value.majorName,
          teacherId: thisClass.value.teacherName,
        }).then(res => {
          emits('visible', false);
          ElMessage({
            message: res.data.message,
            type: 'success',
          })
        });
      } else {
        request.post('/class/update-class', {
          classId: thisClass.value.id,
          collegeId: thisClass.value.collegeName,
          name: thisClass.value.name,
          majorId: thisClass.value.majorName,
          teacherId: thisClass.value.teacherName,
        }).then(res => {
          emits('visible', false);
          ElMessage({
            message: res.data.message,
            type: 'success',
          })
        });
      }
    }
  });
}
</script>

<template>
  <el-form :model="thisClass" :rules="rules" ref="classForm" label-width="120px" :disabled="props.type === 'search'">
    <el-form-item label="班级编号" v-if="props.type!=='add'">
      <el-input v-model="thisClass.id" :disabled="props.type==='edit'"></el-input>
    </el-form-item>
    <el-form-item label="班级名" prop="name">
      <el-input v-model="thisClass.name"></el-input>
    </el-form-item>

    <el-form-item label="班级人数" v-if="props.type!=='add'">
      <el-input v-model="thisClass.count" :disabled="type!=='add'"></el-input>
    </el-form-item>
    <el-form-item label="学院" prop="collegeName">
      <el-select
          v-model="thisClass.collegeName"
          filterable
          placeholder="Select"
          @change="handleChange"
          style="width: 240px"
      >
        <el-option
            v-for="item in collegeOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="班级老师" prop="teacherName">
      <el-select
          v-model="thisClass.teacherName"
          filterable
          placeholder="Select"
          style="width: 240px"
      >
        <el-option
            v-for="item in teacherOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="专业" prop="majorName">
      <el-select
          v-model="thisClass.majorName"
          filterable
          placeholder="Select"
          style="width: 240px"
      >
        <el-option
            v-for="item in majorOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item v-if="props.type!== 'search'">
      <el-button @click="emits('visible', false)">取消</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>

</style>
